2.
   2024
/   
 
(      )
 : 3     :75
:     -     ,     
                     
 -
1.               
2.     (WWW)            
 -
3.       -     -   
  
4. HTML  ?  HTML        ?
 -
2.
5. CSS     , CSS     CSS   
  ,      
 ?
6.                 (,
)       
      
    
    ? 15
-
15 7. CSS           ? 
  
              ?
8. CSS            ?   '  HTML  CSS
    ,  CSS           
  ?
2.
   2024
/   
 
(      )
 : 3     :75
:     -     ,     
                     
 -
1.               
:󷇳  ? ( )
               
          
    :
  (, , ) =  
  (, -,  ) = 
 (, ,  ) =  '    
   
WhatsApp '         ,   
          
   
  :
󷷑󷷒󷷓󷷔 =   

     
-          
  
2.
󼩏󼩐󼩑 
   ?
            :
   '            ?
1960-70   ,     -     
    ARPANET (  )      
  ,       ,        
   :




 

 
 ,         '    
󽁌󽁍󽁎     (  )
 
    ,        :
1. 
       (  google.com)
2.      
    
3.        
   
4.    '         
5.         
6.       
      !
󹷂󹷃󹷄󹷅󹷆󹷇󹷈󹷋󹷉󹷊      
     ()       
    
2.
󷄧󷄫 
                  
 
:

  
 
 
 
,                
 :             
           
󷄧󷄬     
        

  :
 
 





         
      ,      
     
󷄧󷄭   (   )
2.
    (WWW)           
     
    :
 




 
Chrome  Edge      ,  
       
:
󷷑󷷒󷷓󷷔 =  
󷷑󷷒󷷓󷷔  =  '   
   
󷄧󷄮   
               
:
 
 
    
     
PDF  
 
,                
    
󷄰󷄯      
      '  :
 
 (-)
 
2.
 
 
 
 
          
󷄧󷄱
   '      :
 


 

 
     ,    ,     
󷄧󷄲  -  
          -   
:
  
 
  
- 
 
       '   
󷄧󷄳-    
       
   :
2.
 
 
   
 
  
    
     
󹺢     
   ,    '   :
1. TCP/IP 
        
2. 
        
3.  
        
4.  (    )
      
5.   
 -   
         
  
󷇮󷇭  
 
        
   :


2.


 


 
  ,       
󷄧󼿒
                  
    ,   ,  , ,  
  
  
2.     (WWW)            
: 󷋇󷋈󷋉󷋊󷋋󷋌 :  

            , 
    
  :     ,     ( 
TCP/IP)          
: 1960           
   (ARPANET)    
:       ,   ,  
   
 
 '   :,   (FTP),  ,  ,  
   
 ,            
󷙣󷙤󷙥     :  
    WWW ,           '
  
  :         (  )    
 
     
2.
 :1989-1990   -   ,   
      
  :
o    HTML (   )    
o     '    
o    (  , ,  ) 
 
 
o     HTTP/HTTPS  
WWW   - ,       
            
󷊨󷊩  WWW   
   :
    
          '  
          
 -    
            '    
 :   
,    
           
󷈷󷈸󷈹󷈺󷈻󷈼       
1.  :     ,         
2.   :         
3.  : , ,       '
4.   :           
 
5. :,    -    
 
󷊨󷊩  '  
   :            
 : ,        
:         
:-        
:   ,     
             
2.
󷈷󷈸󷈹󷈺󷈻󷈼    
   
      :
        
      

 ,  GPS  
 ,  
  
  -     '  
  ,  
    ,        ,
   
 
󽆪󽆫󽆬
     
     '     
    ,             
 ,       ,         
 =     
WWW =         
    
               
:   ,     ,        

  
 -
3.       -     -   
  
:󺃱󺃲󺃳󺃴󺃵-    ?
-        '        
  
 
     :
1.    
2.         
3.   HTML  
4.   

        
 -  
2.
󷷑󷷒󷷓󷷔-   :
PHPLanguage


.
.
󷘹󷘴󷘵󷘶󷘷󷘸-   
  
   '   

 :


  ?
1.    
2.     
3.     :   
4.   
   '   
:
  '  
 

     
    -  
󹸔󹸗󹸘󹸕󹸖󹸙 -    ?
 -         ( )  
  
,             '  
  
󷷑󷷒󷷓󷷔 - :
2.
 
     :
HTMLLanguage
CSSLanguage
 API
󷘹󷘴󷘵󷘶󷘷󷘸-   

          
    :
󷷑󷷒󷷓󷷔"       "
  :
    
  
 -    
󽁌󽁍󽁎     
 :
-  =        
 -  =        
:
    
      
󼩏󼩐󼩑--   
         
-  
2.
1.    
2.   

3.    
4.   

5.    
     
 -  
1.     
2.  /
3.   

4.    
   
( )
󹺣󹺤󹺥 
     
- 
   
   
 
,   
 
   
 - 
   
     
  
 
  UI  
2.
󽁗 
   
 - 
  
     
:
 

 
  
- 
 (  )
:
 
 
 
 
󷗿󷘀󷘁󷘂󷘃     
   -  
 -  
 



 
 UI
2.
    
  
-  

 

 
 

   
  
󹵍󹵉󹵎󹵏󹵐   :      
   

   '  
 - :
  
"   " 
  
 
- :
   
   
   
   
       
󼫹󼫺 
   -  :
2.

-  
 -  
  
  
 
 



, , 
 


 


 



  
UI   

 
 
󷖤󷖥󷖦
-   -        
     -     '   
  ,        -   
       HTML        
 
 , -           '
   ,   ,       
      '    
4. HTML  ?  HTML        ?
:󷋇󷋈󷋉󷋊󷋋󷋌HTML  ?
  :HTML        '       
            , , ,  
    
 :           
   
    :         (<h1>, <p>, <img>, )
      
  , HTML           ,      
 -
     
󷙣󷙤󷙥  HTML    
1. :,  , ,       
2.  :<a>      -      
2.
3.    :,           
4.    :    <form>, <input>,  <button>  
   
5.  :     ,   
  
󷊨󷊩HTML    
HTML    ,          
   

 
   
HTML 2.0
1995
  ;       
HTML 3.2
1997
, ,       
HTML 4.01
1999
 CSS,  ,  // 
   
XHTML 1.0
2000
XML-   ;     
HTML5
2014
  (, , ),    (, ), 
  API,       
HTML5.1 
5.2
2016
2017
ARIA     ,    ,
  
HTML 



     , WHATWG   
   
󷈷󷈸󷈹󷈺󷈻󷈼  HTML    HTML5   
1.    :
o HTML 4.01 ,     
o HTML5      :
html
<!DOCTYPE html>
2.   :
o     <div> '     
o HTML5  <header>, <nav>, <section>, <article>      ,
         
3.    :
o HTML 4.01 ,        -  (
  )    
o HTML5 <audio>  <video>    '    
4.      :
o HTML5  , ,         , 
       
2.
5. API     :
o HTML5   , -,  --,     
 API  
o        
6.  -   :
o HTML5          , 
     
  
o    - 
󷊨󷊩HTML5  
   
HTML5                   :
  '    , -  

      SEO    
 
      ,       
 
󽆪󽆫󽆬
HTML          HTML 2.0  3.2     
  HTML5     ,       
     
       ' 
HTML5     , , ,  
 '  
 , HTML            
   ,         ,   
      
 -
5. CSS     , CSS     CSS   
  ,      
 ?
:󷇳CSS   ? (    )
 CSS         :
2.
󷷑󷷒󷷓󷷔" HTML       '  "
   CSS       :
1.  (  ,  , )
2.     ( , , , )

 CSS       :
"     16px  "
󹴈󼪩󼪪󼪫󼪬󼪱󼪲󼪭󼪮󼪯󼪰CSS   
 CSS       :
 { : ; : ;}
   :
  +   
  -    ' 
󷘹󷘴󷘵󷘶󷘷󷘸1.   — “        ?”
 CSS    HTML     
:
 { : ;}
:
󷷑󷷒󷷓󷷔p = 
󷷑󷷒󷷓󷷔  : "    "
      :
" <p>   '   "
 :
2.
p →   
h1 →  
.className →   
#idName → ID   
:
h1 { : ;}
:  <h1>     
󹷗󹷘󹷙󹷚󹷛󹷜2.    — "       ?"
{ }         
    
:
p { : ; -: 16px;}
{ }            
󼫹󼫺3.  — “    
        
:
: ;
      
   CSS       
󷬭󷬮󷬯󷬰4.    — “  ?”
     
   
 :
2.

-


 

:
: ;
    
󷗿󷘀󷘁󷘂󷘃5.  — “     ?”
     
 
 :

16 



:
-: 16px;
:
 = -
 = 16 
󼩺󼩻   
   CSS  :
h1 { : ; -: 32px;  -: ;}
    :
2.
 → h1
  → { ... }
  
, -,  -
 , 32px, 
  :
" h1  , 32px,    "
󼩏󼩐󼩑-   (  )
CSS          :
󷷑󷷒󷷓󷷔"       "
 :
    
   
 
 
CSS     :
.- { : ;}
, CSS  , ,    
󹶜󹶟󹶝󹶞󹶠󹶡󹶢󹶣󹶤󹶥󹶦󹶧HTML + CSS    
HTML:
<p>     </p>
CSS:
p { : ; -: 18px;}
:
󷷑󷷒󷷓󷷔        
2.
󽁌󽁍󽁎  
CSS       :
 
   { }
: 
 ;    
:
 { : ;}
:

 = 
󹵍󹵉󹵎󹵏󹵐CSS      ( )
CSS  -       :
1.   
 { : ; }
2.    
. { : ; }
3.   
#  { : ; }
       
󺛺󺛻󺛿󺜀󺛼󺛽󺛾CSS      
   ?

  CSS        
 :
2.
 { -: ;}
h1 { : ;}
p { -: 1.6;}
  CSS  = CSS   
 :
󷷑󷷒󷷓󷷔 =  
󷷑󷷒󷷓󷷔 =   
:
 =   
 =   
󼫹󼫺  
 CSS  CSS     HTML  '      
                 
HTML    ,             
                  ,
                  
       (  , ,  ),   

           ,  CSS  
             ,  
     

 
6.                 (,
)      
      
 
       ?
:󷋇󷋈󷋉󷋊󷋋󷋌  ?
  :HTML  <iframe>       iframe    
:         (URL)    
  
2.
  :
html
<iframe src="https://www.example.com" width="600" height="400"></iframe>
, src     
  
    , 
         
󷙣󷙤󷙥      
    <iframe>      :
1.  src     URL      
2.    '           
3.                
   
         YouTube
,  Google Map,            
󷊨󷊩iframes      
1.     :
html
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen></iframe>
    '      
2.     :
html
<iframe>
src="https://www.google.com/maps/embed?..."></iframe>
               
3.      :
html
<iframe src="https://www.wikipedia.org" width="800" height="600"></iframe>
2.
         
󷈷󷈸󷈹󷈺󷈻󷈼       
?
1. 

      (, , )     
         
  
2.   
        (, , )   
  
       
3. - 
 ,   ,          
          
4.  - 
        '   
            
   
󷊨󷊩   
     ,  -     :
:          
:    ,         
SEO   :            
 :          
󷈷󷈸󷈹󷈺󷈻󷈼-  
   
  (  )         
   -            ,
      () 
    
,    
                 
    
󽆪󽆫󽆬
2.
 iframe       ,        , 
               

 ,  
 ,  -        
,            
-
7. CSS           ? 
    
             ?
:󷋇󷋈󷋉󷋊󷋋󷋌CSS        
   
           -  , , ,
  -        - , , , 
 :
  
          
  
           

CSS       
󷘹󷘴󷘵󷘶󷘷󷘸CSS     ?
      ,  :
  CSS    HTML     
:
 { : ;}
󷷑󷷒󷷓󷷔   <p> ( )   
  
󼩺󼩻1. CSS       
󷄧󼿒  ()
2.
                
 '  
   -   ,
  ""  
󷩾󷩿󷪄󷪀󷪁󷪂󷪃-  
  
 :
    
   
   
  '    , 
 :
󷷑󷷒󷷓󷷔"      "
   
󹳾󹳿󹴀󹴁󹴂󹴃    CSS  
h1 { : ;}
h2 { : ;}
h3 { : ;}
   3   󽆱( 
)
󹳾󹳿󹴀󹴁󹴂󹴃    CSS  
h1, h2, h3 { : ;}
 󷄧󼿒   
󼩏󼩐󼩑 
   
     :
2.
 
CSS  
   
  
 
󹵙󹵚󹵛󹵜    
, ,   { - : ;}
,  {
 : 10px;}
󷷑󷷒󷷓󷷔        
󷊋󷊊2. CSS        
     -    
󷄧󼿒  ()
          
HTML  
   --     '   
󷩾󷩿󷪄󷪀󷪁󷪂󷪃-  
 :

        
    
 
 :
󷷑󷷒󷷓󷷔"      "
    
2.
󹳾󹳿󹴀󹴁󹴂󹴃HTML     
<div class="box"> <p>    </p></div>
<p>   </p>
󹳾󹳿󹴀󹴁󹴂󹴃CSS   
.  { : ;}
󷷑󷷒󷷓󷷔:
.box     <p> 
:
   󷄧󼿒
   󽆱
󹺔󹺒󹺓    
 :
  {  }
:
  {  - :  
;}
ul li { - : ;}
. h2 { : ;}
󷷑󷷒󷷓󷷔       '   
󷊈󷊉- 

    :
2.
.  . li a { : ;}
:
  
 .
 . 
   󷘹󷘴󷘵󷘶󷘷󷘸
󼩏󼩐󼩑 
   
     :
   
   
CSS     
HTML   
    
󹵍󹵉󹵎󹵏󹵐    

  

    



 

. 
󼫹󼫺 +  

   :
. h2, . p { : ;}
:
.    h2  p
2.
 󷷷󷷸
󷩆󷩇󷩈󷩉󷩌󷩊󷩋 CSS          
1.  
   
2.   
CSS HTML      
3.   - 
  '   
4.  
    
5.   
         
󷘹󷘴󷘵󷘶󷘷󷘸    
HTML:
<div class=""> <h2></h2> <p>: ₹20000</p></div>
CSS:
. h2 { :  ;}
.  { : ;}
󷷑󷷒󷷓󷷔         

󷈷󷈸󷈹󷈺󷈻󷈼  (    )
2.
    :
󷷑󷷒󷷓󷷔 =       ()
󷷑󷷒󷷓󷷔 =     ()
󷄧󼿒
CSS           ,  
      
       '      ,  

     
            '    
  ,         
  ,  CSS    
 ,     , 
HTML   
      ,   , , 
-        
8. CSS            ?   '  HTML  CSS
    ,  CSS           
  ?
:󷋇󷋈󷋉󷋊󷋋󷋌
: HTML  
   ,            HTML ,    '
      :
<nav>  :       
<ul> (unordered list):      
<li> ( ):     
  
<a> (  ):     
 :  HTML  
html
<nav>>
<ul>
<li><a href="index.html"> </a></li>
2.
<li><a href="about.html"></a></li>
<li><a href="services.html"></a></li>
<li><a href="contact.html"> </a></li>
</ul>
</nav>
    CSS  ,     -      
󷙣󷙤󷙥  CSS    
CSS             
    CSS :
1.   :
o :  ;  -;    '  

o justify-content: --;  -;  
o : ;      '  
2. :
o  
-:        
o :     
o      
o    -
3. :
o :hover pseudo-class   '     
o :   
4.   :
o       - , -,   -

󷊨󷊩 : CSS      
  {
-: #333;
}
  {
- -:  
;
: 0;
 : 0;
:  ;
}
2.
    {
: 0 15px;
}
    {
: ;
 -:  
;
 : 10px;
}
    : {
-: #555;
-: 5px;
}
         
  
󷈷󷈸󷈹󷈺󷈻󷈼   
CSS  , 
     :
  {
: ;
}
    {
: 10px 0;
}
        
󷊨󷊩CSS     
1.    :
o          @media  
 
o :     
2.   :
o CSS   :hover  JavaScript     /
  
3. :
o         
o :          
4.     :
2.
o : ; : 0;         
o : ;         
󷈷󷈸󷈹󷈺󷈻󷈼CSS      
 

 :
           -,
,  
 :          

  
   :,        
 
 :CSS   
     ,     ' 
 
󷊨󷊩-  
    :
HTML            
CSS      , , ,     
   
 
  ,            
  
󽆪󽆫󽆬
HTML  CSS             
HTML  <nav>, <ul>, <li>,  <a>    
CSS      , , ,    
  
CSS  ,          ,   ,
      
        
       
"                 
 
        ,         
 "